<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>新年快乐</title>
    <link rel="stylesheet" href="../style/weui.css"/>
    <link rel="stylesheet" href="./example.css"/>
</head>
<body ontouchstart>
    <div class="weui-toptips weui-toptips_warn js_tooltips">错误提示</div>

    <div class="container" id="container">

    <div class="page" style="opacity: 1;">
        <div class="page__hd">
            <h1 class="page__title">新年快乐</h1>
            <p class="page__desc">选择您所在的省，然后确定</p>
        </div>
        <div class="page__bd page__bd_spacing">
            <a href="javascript:;" class="weui-btn weui-btn_default" id="showPicker">各省发来贺电</a>
        </div>
        <audio id="myAudio0" class="weui-btn weui-btn_default" style="margin-top:10px;" controls controlsList="nodownload">
            <source src="./sound/horse.ogg" type="audio/ogg">
            <source src="http://www.w3school.com.cn/i/horse.mp3" type="audio/mp3">
            Your browser does not support the audio element.
        </audio>
        <audio id="myAudio1" class="weui-btn weui-btn_default" style="margin-top:10px;display:none;" controls controlsList="nodownload">
            <source src="./sound/song.ogg" type="audio/ogg">
            <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mp3">
            Your browser does not support the audio element.
        </audio>
    </div>
    </div>
    <script src="./zepto.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    
    <script type="text/javascript">
        var cityMap = {
            0: { "label":'北京', "audio":"http://www.w3school.com.cn/i/horse.ogg"},
            1: { "label":'山东', "audio":"http://www.w3school.com.cn/i/song.ogg"}
           // 2: { "label":'天津', "audio":"http://www.w3school.com.cn/i/horse.ogg"},
           // 3: { "label":'上海', "audio":"http://www.w3school.com.cn/i/song.ogg"},
           // 4: { "label":'湖北', "audio":"http://www.w3school.com.cn/i/horse.ogg"}
        };
        var originId = "myAudio0";
        
        $('#showPicker').on('click', function () {
            weui.picker([{
                label: '北京',
                value: 0
            }, {
                label: '山东',
                value: 1
            }], {
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                    $('#showPicker').text(cityMap[result[0]].label);
                    //$('#myAudio').attr('src', cityMap[result[0]].audio);
                    $('#'+originId).hide();
                    document.getElementById(originId).pause();
                    var audioId = "myAudio" + result[0];
                    originId = audioId;
                    $('#'+audioId).show();
                    document.getElementById(audioId).play();
                    //document.getElementById('myAudio').src = cityMap[result[0]].audio;
                    //document.getElementById('myAudio').play();
                    //$('#myAudio').load();
                    //console.log(result);
                }
            });
        });
    </script>
</body>
</html>
